<!--错误页面-->
<template>
  <div class="error_box" :style="{height:height+'px'}">
    <div class="error">
      <div class="cry404">
        <img src="@/assets/image/error/c_2.jpg" />
      </div>
      <h2 v-if="error.statusCode == 404">404 - 页面不存在</h2>
      <h2 v-else>500 - 服务器错误</h2>
      <ul class="group">
        <li>
          <nuxt-link to="/">
            <el-button type="primary" plain>返回主页</el-button>
          </nuxt-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: ["error"],
  layout: "errorLay",
  head() {
    return {
      title: this.title,
      meta: [{ hid: "description", name: "vblog", content: "vblog访问404" }],
    };
  },
  data() {
    return {
      title: "vblog找不到你访问的页面",
      height: "",
    };
  },
  methods: {},
  mounted() {
    this.height = document.body.clientHeight;
  },
};
</script>
<style lang="scss" scoped>
.error_box {
  text-align: center;
  .error {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  h2 {
    color: $primary_clr;
    line-height: 40px;
    padding: 10px 0;
  }
  .group {
    margin-top: 25px;
  }
}
</style>